<style scoped>
ul, li {
    margin: 0;
    padding: 0;
    font-size: 1rem;
    list-style: none;
    user-select: none;
}

ul {
    display: flex;
    row-gap: 0.25rem;
    flex-wrap: wrap;
    flex-direction: column;
}

li ul {
    position: relative;
    white-space: nowrap;
    margin-inline-start: 1rem;
    padding-inline-start: 1rem;
}
</style>

<template>
    <ul>
        <li v-for="item in list">
            <div class="py-1 box-border flex items-center border-0 border-b border-solid border-#e5e7eb">
                <div @click="itemClick(item)" class="p-r-6 cursor-pointer box-border flex gap-col-2 items-center border-0 border-r border-solid border-#e5e7eb">
                    <div class="inline-flex items-center justify-center">
                        <svg class="w-4 h-4 border border-1 rounded border-inherit border-solid" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M10 24L20 34L40 14" stroke="#0f1023" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </div>
                    <div>{{ item.name }}</div>
                </div>
                <div class="p-l-6">
                    <template v-for="permission in (item.permission || [])">
                        <div @click="itemClick(permission)" class="cursor-pointer box-border p-x-2 inline-flex gap-col-2 items-center">
                            <div class="inline-flex items-center justify-center">
                                <svg class="w-4 h-4 border border-1 rounded border-inherit border-solid" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M10 24L20 34L40 14" stroke="#0f1023" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </div>
                            <div>{{ permission.name }}</div>
                        </div>
                    </template>
                </div>
            </div>
            <!--
            <RouteOption v-if="item.children" v-model:model="model" :list="item.children" />
            -->
        </li>
    </ul>
</template>

<script setup lang="ts">
import {Api} from '@/api/type'
import {inject, onMounted} from 'vue'
// ------------------------------------
type R<T> = Api.Common.R<T>;
type Data = Api.System.Route;
type Option = Api.System.RouteOption;
type RouteOperation = Api.System.RouteOperation;
// ------------------------------------

const {list} = withDefaults(defineProps<{
    list: Array<Option>;
}>(), {
    list: () => []
})

const routeOption = inject<RouteOperation>('route-operation')

function itemClick(item: Option) {
    console.info(item)
}

async function initialize() {
    console.info(JSON.stringify(routeOption?.model.value))
    console.info(JSON.stringify(routeOption?.collect.value))
}

onMounted(() => {
    initialize()
})
</script>
